<template>
	<div class="upload-file">
		<Alert style="max-width:300px;">
			<slot name="remind">可上传{{limit}}个文件,单个文件大小{{maxSize}}MB</slot>
		</Alert>
		<vuedraggable :list="uploadList" :disabled="!draggable||!multiple" :animation="200" class="list-group" ghost-class="thumb-ghost"
		 @end="onEnd">
			<div class="upload-list" style="lineHeight:30px;" v-for="(item, index) in uploadList" :key="index">
				<div v-if="item.status == 'finished'">
					<Row>
						<Col span="18">
						<a :href="item.url" target="_blank" style="word-break: break-all;">{{item.url}}</a>
						</Col>
						<Col span="6">
						<Icon type="ios-trash-outline" style="cursor:pointer;" color="red" size="18" @click="handleRemove(item)"></Icon>
						</Col>
					</Row>

				</div>
				<div v-else>
					<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
				</div>			
			</div>
		</vuedraggable>
		<Progress  v-if="showProgress" :percent="percent" status="active" :stroke-color="['#108ee9', '#87d068']"  text-inside  :stroke-width="15" ></Progress>
		<template v-if="limit>uploadList.length">
			<Upload ref="upload" :multiple="multiple" :show-upload-list="false" :on-success="handleSuccess" :on-error="handleError"
			 :format="format" :accept="accept" :max-size="maxSize*1024" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
			 :before-upload="handleBeforeUpload" :on-progress="handleProgress" type="drag" :action="uploadFileUrl" :headers="accessToken" class="upload-btn"
			 style="width: 60px;" :data="data">
				<div class="upload-camera" style="width: 60px;, height: 60px; lineHeight: 60px;">
					<Icon type="md-camera" size="20"></Icon>
				</div>
			</Upload>
		</template>
	</div>
</template>

<script>
	import {
		uploadFile
	} from "@/api/index";
	import vuedraggable from "vuedraggable";

	export default {
		name: "uploadFile",
		components: {
			vuedraggable
		},
		props: {
			value: {
				type: Object
			},
			draggable: {
				type: Boolean,
				default: true
			},

			multiple: {
				type: Boolean,
				default: true
			},
			maxSize: {
				type: Number,
				default: 5
			},

			limit: {
				type: Number,
				default: 10
			},
			format: {
				type: Object,
				default: new Array(),
			},
			accept: {
				type: String,
				default: '',
			},
			data: {
				type: Object,
				default: null,
			},

		},
		data() {
			return {
				accessToken: {},
				uploadFileUrl: uploadFile,
				uploadList: [],
				viewImage: false,
				imgUrl: "",
				percent:0,
				showProgress:false,
			};
		},
		methods: {
			onEnd() {
				this.returnValue();
			},

			init() {
				this.setData(this.value, true);
				this.accessToken = {
					accessToken: this.getStore("accessToken")
				};
			},
			handleRemove(file) {
				const uploadList = this.uploadList;
				this.uploadList.splice(uploadList.indexOf(file), 1);
				this.returnValue();
			},
			handleProgress(event,file,fileList){
				this.percent = parseInt(event.percent);
				if(this.percent <100){
					this.showProgress=true;
				}else{
					this.showProgress=false;
				}
			},
			handleSuccess(res, file) {
				if (res.success) {
					file.url = res.result;
					// 单张图片处理
					if (!this.multiple && this.uploadList.length > 0) {
						// 删除第一张
						this.uploadList.splice(0, 1);
					}
					this.uploadList.push(file);
					// 返回组件值
					this.returnValue();
				} else {
					this.$Message.error(res.message);
				}
			},
			handleError(error, file, fileList) {
				this.$Message.error(error.toString());
			},
			handleFormatError(file) {
				this.$Notice.warning({
					title: "不支持的文件格式",
					desc: "所选文件‘ " +
						file.name +
						" ’格式不正确, 请选择 " + this.format.join(",") + "格式文件"
				});
			},
			handleMaxSize(file) {
				this.$Notice.warning({
					title: "文件大小过大",
					desc: "所选文件‘ " +
						file.name +
						" ’大小过大, 不得超过 " +
						this.maxSize +
						"M."
				});
			},
			handleBeforeUpload(file) {
				if (this.multiple && this.uploadList.length >= this.limit) {
					this.$Message.warning("最多只能上传" + this.limit + "个文件");

					return false;
				}
				return true;
			},
			returnValue() {
				if (!this.uploadList || this.uploadList.length < 1) {
					if (!this.multiple) {
						this.$emit("input", "");
						this.$emit("on-change", "");
					} else {
						this.$emit("input", []);
						this.$emit("on-change", []);
					}
					return;
				}
				if (!this.multiple) {
					// 单张
					let v = this.uploadList[0].url;
					this.$emit("input", v);
					this.$emit("on-change", v);
				} else {
					let v = [];
					this.uploadList.forEach(e => {
						v.push(e.url);
					});
					this.$emit("input", v);
					this.$emit("on-change", v);
				}
			},
			setData(v, init) {
				if (typeof v == "string") {
					// 单张
					if (this.multiple) {
						this.$Message.warning("多个上传仅支持数组数据类型");
						return;
					}
					if (!v) {
						this.uploadList = [];
						return;
					}

					this.uploadList = [];
					let item = {
						url: v,
						status: "finished"
					};
					this.uploadList.push(item);
					this.$emit("on-change", v);
				} else if (typeof v == "object") {
					// 多张
					if (!this.multiple) {
						this.$Message.warning("单个上传仅支持字符串数据类型");
						return;
					}
					this.uploadList = [];
					if (v.length > this.limit) {
						for (let i = 0; i < this.limit; i++) {
							let item = {
								url: v[i],
								status: "finished"
							};
							this.uploadList.push(item);
						}
						this.$emit("on-change", v.slice(0, this.limit));
						if (init) {
							this.$emit("input", v.slice(0, this.limit));
						}
						this.$Message.warning("最多只能上传" + this.limit + "个文件");
					} else {
						v.forEach(e => {
							let item = {
								url: e,
								status: "finished"
							};
							this.uploadList.push(item);
						});
						this.$emit("on-change", v);
					}

				}

			}
		},
		mounted() {
			this.init();
		},
		watch: {
			value(val) {
				this.setData(val);
			}
		},

	};
</script>

<style lang="less">
	.upload-file {
		.upload-list {
			display: inline-block;
			text-align: center;
			overflow: hidden;
			background: #fff;
			position: relative;
			margin-right: 5px;
		}

		.upload-btn {
			display: inline-block;
		}

		.upload-list-cover {
			display: none;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.6);
		}

		.upload-list:hover .upload-list-cover {
			display: block;
		}

		.upload-list-cover i {
			color: #fff;
			font-size: 20px;
			cursor: pointer;
			margin: 0 2px;
		}

		.list-group {
			display: inline-block;
		}

		.thumb-ghost {
			opacity: 0.5;
			background: #c8ebfb;
		}
	}
</style>
